import jQuery from 'jquery';
import jBox from 'jbox';
import 'jbox/dist/jBox.all.css';

// Tooltip

new jBox('Tooltip', {
  attach: '#Tooltip-1',
  content: 'This is a basic jBox tooltip'
});

new jBox('Tooltip', {
  attach: '#Tooltip-2',
  theme: 'TooltipBorderThick',
  width: 200,
  position: {
    x: 'left',
    y: 'center'
  },
  outside: 'x',
  pointer: 'top:15',
  content: 'You have many options to position and animate your jBoxes',
  animation: 'move'
});

new jBox('Tooltip', {
  attach: '#Tooltip-3',
  theme: 'TooltipDark',
  animation: 'zoomOut',
  content: 'Use themes to change appearance'
});

new jBox('Tooltip', {
  attach: '#Tooltip-4',
  width: 300,
  pointer: 'right:80',
  animation: 'move',
  delayOpen: 1000,
  delayClose: 2000,
  content: 'This tooltip waits 1 second to open and closes after 2 seconds',
  onOpen: function () {
    this.source.removeClass('active').html('Hover me');
  },
  onClose: function () {
    this.source.removeClass('active').html('Hover me');
  }
});

new jBox('Mouse', {
  attach: '#Tooltip-5',
  position: {
    x: 'right',
    y: 'bottom'
  },
  content: 'I will follow you!'
});

new jBox('Tooltip', {
  attach: '#Tooltip-6',
  width: 280,
  closeOnMouseleave: true,
  animation: 'zoomIn',
  content: "I won't close when you move your mouse over me"
});

new jBox('Tooltip', {
  attach: '#Tooltip-7',
  target: '#Tooltip-1',
  theme: 'TooltipBorder',
  trigger: 'click',
  adjustTracker: true,
  closeOnClick: 'body',
  closeButton: 'box',
  animation: 'move',
  position: {
    x: 'left',
    y: 'top'
  },
  outside: 'y',
  pointer: 'left:20',
  offset: {
    x: 25
  },
  content:
    'You can position your tooltips at any element.<br>Scroll up and down to see this tooltip flip position!',
  onOpen: function () {
    this.source.addClass('active').html('Now scroll');
  },
  onClose: function () {
    this.source.removeClass('active').html('Click me');
  }
});

new jBox('Tooltip', {
  attach: '#Tooltip-8',
  theme: 'TooltipBorder',
  trigger: 'click',
  width: 200,
  height: jQuery(window).height() - 160,
  adjustTracker: true,
  closeOnClick: 'body',
  closeOnEsc: true,
  animation: 'move',
  position: {
    x: 'right',
    y: 'center'
  },
  outside: 'x',
  content:
    'Scroll up and down or resize your browser, I will adjust my position!<br><br>Press [ESC] or click anywhere to close.',
  onOpen: function () {
    this.source.addClass('active').html('Now scroll');
  },
  onClose: function () {
    this.source.removeClass('active').html('Click me');
  }
});

// Modal

new jBox('Modal', {
  attach: '#Modal-1',
  height: 200,
  title: "I'm a basic jBox modal window",
  content:
    '<div style="line-height: 30px;">Try to scroll ...it\'s blocked.<br>Press [ESC] or click anywhere to close.</div>'
});

new jBox('Modal', {
  attach: '#Modal-2',
  width: 350,
  height: 200,
  blockScroll: false,
  animation: 'zoomIn',
  draggable: 'title',
  closeButton: true,
  content: 'You can move this modal window',
  title: 'Click here to drag me around',
  overlay: false,
  reposition: false,
  repositionOnOpen: false
});

new jBox('Modal', {
  attach: '#Modal-3',
  width: 450,
  height: 250,
  closeButton: 'title',
  animation: false,
  title: 'AJAX request',
  ajax: {
    url: 'https://reqres.in/api/users?delay=2',
    data: {
      id: '1982',
      name: 'Stephan Wagner'
    },
    method: 'post',
    reload: 'strict',
    setContent: false,
    beforeSend: function () {
      this.setContent('');
      this.setTitle('<div class="ajax-sending">Sending AJAX request...</div>');
    },
    complete: function () {
      this.setTitle('<div class="ajax-complete">AJAX request complete</div>');
    },
    success: function (response) {
      this.setContent(
        '<div class="ajax-success">Response:<tt>' +
          JSON.stringify(response) +
          '</tt></div>'
      );
    },
    error: function () {
      this.setContent(
        '<div class="ajax-error">Oops, something went wrong</div>'
      );
    }
  }
});

// Confirm

new jBox('Confirm', {
  content: 'Do you really want to do this?',
  cancelButton: 'Nope',
  confirmButton: 'Sure do!'
});

// Notice

jQuery('#Notice-1').on('click', function () {
  new jBox('Notice', {
    content: "Hello, I'm a notice",
    color: 'black'
  });
});

jQuery('#Notice-2').on('click', function () {
  new jBox('Notice', {
    animation: 'flip',
    color: getColor(),
    content: 'Oooh! They also come in colors',
    delayOnHover: true,
    showCountdown: true
  });
});

jQuery('#Notice-3').on('click', function () {
  new jBox('Notice', {
    theme: 'NoticeFancy',
    attributes: {
      x: 'left',
      y: 'bottom'
    },
    color: getColor(),
    content: "Hello, I'm down here",
    audio: 'https://cdn.jsdelivr.net/gh/StephanWagner/jBox@latest/assets/audio/bling2',
    volume: 80,
    animation: {
      open: 'slide:bottom',
      close: 'slide:left'
    }
  });
});

jQuery('#Notice-4').on('click', function () {
  new jBox('Notice', {
    attributes: {
      x: 'right',
      y: 'bottom'
    },
    stack: false,
    animation: {
      open: 'tada',
      close: 'zoomIn'
    },
    color: getColor(),
    title: "Tadaaa! I'm single",
    content: "Open another notice, I won't stack"
  });
});

// Image

new jBox('Image', {
  imageCounter: true,
  imageCounterSeparator: ' of '
});

// Additional JS for demo purposes

jQuery('#Tooltip-4').on('mouseenter mouseleave', function () {
  jQuery('#Tooltip-4').addClass('active').html('Wait...');
});

jQuery('.target-notice')
  .on('click', function () {
    jQuery(this).addClass('active').html('Click me again');
  })
  .on('mouseleave', function () {
    jQuery(this).removeClass('active').html('Click me');
  });

var colors = ['red', 'green', 'blue', 'yellow'];
var index = 0;
var getColor = function () {
  if (index >= colors.length) {
    index = 0;
  }
  return colors[index++];
};
